<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>你，我爱</title>
    <style>
        :root {
            --text-color: black;
            font-size: 24px;
        }

        body {
            padding: 0;
            margin: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
        }

        .lyrics-wrapper {
            scroll-behavior: smooth;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-size: cover;
        }

        .lyrics {
            box-sizing: border-box;
            list-style-type: none;
            padding: 20px;
            margin: 0;
        }

        .verse {
            box-sizing: border-box;
            font-weight: bold;
            color: transparent;
            line-height: 30px;
            padding-bottom: 20px;
            transform-origin: left top;
            text-shadow: 0 0 0 white;
            transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
            transition-property: transform, opacity;
            opacity: 0.6;
        }

        .verse:first-child {
            margin-top: 100px;
        }

        .verse:last-child {
            margin-bottom: 100px;
        }

        .verse.highlight {
            opacity: .9;
            text-shadow: 0 0 0 transparent;
            transform: scale(1.25);
        }
    </style>
</head>

<body>
    <audio id="music" style="margin-top: 100px;" controls src="./assets/audio/dear_me.mp3"></audio>
    <div id="wrapper">
        <ul class="lyrics">
            <li class="verse highlight">我亲爱的喆</li>
            <li class="verse">你要知道的</li>
            <li class="verse">我很喜欢你</li>
            <li class="verse">你也要知道的</li>
            <li class="verse">我的情绪跟随你</li>
            <li class="verse">情绪低落的你</li>
            <li class="verse">揪扯着我的心</li>
            <li class="verse">我希望你快乐</li>
            <li class="verse">和我在一起的每时每刻</li>

            <li class="verse">距离</li>
            <li class="verse">让你我暂时分离</li>
            <li class="verse">但是呀</li>
            <li class="verse">爱可隔山海</li>
            <li class="verse">我爱你</li>
            <li class="verse">真心实意</li>
            <li class="verse">日复一日的</li>
            <li class="verse">我念你三千遍</li>
            <li class="verse">遍遍让我思你更切</li>

            <li class="verse">宝宝</li>
            <li class="verse">你有会说话的眼睛</li>
            <li class="verse">宝宝</li>
            <li class="verse">我想念和你在一起的每时每刻</li>
            <li class="verse">爱你至此</li>
            <li class="verse">只是未来的开始</li>

            <li class="verse">mua~爱你的浩晨</li>
        </ul>
    </div>

    <script>
        document.querySelector('#music').addEventListener('play', () => {
            console.log(1111);
            const wrapper = document.querySelector('#wrapper');
            wrapper.classList.add('lyrics-wrapper')
            const BLUR_LEVELS = 4;
            const MAX_BLUR = 2;
            const VERSE_INTERVAL = 2000;

            const lyrics = document.querySelector('.lyrics');

            const lyricsWrapper = document.querySelector('.lyrics-wrapper');

            const lyricsBg = document.querySelector('.lyrics-bg');
            let currentVerseIdx = null;

            function scrollLyricsToVerse(verse) {
                const scrollOffset = Math.floor(lyricsWrapper.clientHeight * 0.2);
                const versePosition = verse.offsetTop - scrollOffset;

                lyricsWrapper.scrollTop = versePosition;
            }

            function setVerse(verseIdx) {
                const currentVerse = lyrics.children[currentVerseIdx];
                const newVerse = lyrics.children[verseIdx];
                if (currentVerse) {
                    currentVerse.classList.remove('highlight');
                }
                if (newVerse) {
                    scrollLyricsToVerse(newVerse);
                    newVerse.classList.add('highlight');
                }
                for (let i = 0; i < lyrics.children.length; i++) {
                    const verse = lyrics.children[i];
                    const dist = Math.abs(i - verseIdx);
                    const blurLevel = Math.min(dist, BLUR_LEVELS);
                    if (verse === newVerse) {
                        verse.style = '';
                    } else {
                        verse.style.textShadow = `0 0 ${blurLevel}px var(--text-color)`;
                    }
                }
                currentVerseIdx = verseIdx;
            }

            function incrementVerse(amount) {
                const newVerseIdx = Math.max(0, (currentVerseIdx + amount) % lyrics.children.length);
                setVerse(newVerseIdx);
            }

            setVerse(0);
            setInterval(() => {
                incrementVerse(1);
            }, VERSE_INTERVAL);
        }, false)

        window.onload = () => {


        }
    </script>
</body>

</html>